
import React, { memo } from 'react';
import cs from 'classnames';
import sty from './sty.module.css';

import { getSizeImage, getCount } from '@/utils/format-utils';
import { useHistory } from 'react-router';
const SongCover = memo((props) => {
  const { info = {} } = props;
  const picUrl = info.picUrl || info.coverImgUrl || '';
  const playCount = info.playCount || 0;
  const name = info.name || '';


  const history = useHistory();
  const goToSongList = () => {
    history.push('/songlist?songlistId=' + (info.id || ''))
  }
  return (
    <div className={sty.item}>
      <div className={sty.cover} onClick={goToSongList}>
        <img src={getSizeImage(picUrl, 140)} alt="" />
        <div className={cs(sty.mask, 'sprite_cover')}></div>
        <div className={cs(sty.bottomBar, 'sprite_cover', 'flex4')}>
          <div className='flex2'>
            <i className={cs('sprite_icon', sty.erji)}></i>
            <span>   {
              getCount(playCount)
            }</span>
          </div>
          <i className={cs('sprite_icon', sty.play)}></i>
        </div>
      </div>
      <div className={sty.title}>  {name}</div>
    </div>

  )
})
export default SongCover